<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 搜索 -->
      <el-form :inline="true" :model="requestParameters" ref="requestParameters">
        <el-form-item label="目标名称：" prop="tagName">
          <el-input
            @keyup.enter="handleFilter"
            style="padding-right: 50px;"
            placeholder="请输入"
            class="filter-item"
            v-model="requestParameters.tagName"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select
            class="filter-item"
            v-model="requestParameters.state"
            @keyup.enter="handleFilter"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" size="small" @click="hClear">清除</el-button>
          <el-button
            size="small"
            type="primary"
            @click="handleFilter"
          >搜索</el-button>
        </el-form-item>

        <el-button
          class="filter-item fr"
          size="small"
          style="margin-left: 10px;"
          @click="hAddTag"
          type="success"
          icon="el-icon-edit"
        >新增标签</el-button>
        <el-link type="primary" class="fr" :href="'#/subjects/list'">
          <el-button
            v-if="this.$route.query.id ? true : false"
            class="filter-item"
            size="small"
            style="margin-left: 20px;"
            type="success"
            icon="el-icon-s-home"
          >返回学科</el-button>
        </el-link>
      </el-form>
      <span v-if= "this.$route.query.id">
        <Breadcrumb>
        {{this.$route.query.name}}
        > 标签管理
        </Breadcrumb>
      </span>
      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- end -->
      <!-- 数据列表 -->
      <el-table
        :key="tableKey"
        :data="tagsList"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属学科">
          <template slot-scope="scope">
            <span>{{scope.row.subjectName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签名称">
          <template slot-scope="scope">
            <span>{{scope.row.tagName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建者">
          <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建日期">
          <template slot-scope="scope">
            <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column
          align="center"
          label="操作"
          width="280"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="hStatus(scope.row)">
              <span>{{scope.row.state ? '启用' : '禁用'}}</span>
            </el-button>
            <el-button
              :disabled="scope.row.state===1"
              type="text"
              @click="hModify(scope.row)"
              >编辑</el-button>
            <el-button
              :disabled="scope.row.state===1"
              v-if="scope.row.status!='deleted'"
              type="text"
              @click="hDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页 -->
      <div class="pagination fr">
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="hCurrentChange"
            hide-on-single-page
            :current-page="Number(requestParameters.page)"
            :total="Number(total)"
            :page-size="Number(requestParameters.pagesize)"
            :page-sizes="[10,20,30, 50]"
            layout=" prev, pager, next, sizes, jumper"
          ></el-pagination>
        </div>
      </div>
      <!-- end -->
      <!-- 新增标签弹层 -->
      <Dialog ref="refTags" :tag="curTag" @modifyOK="getTags" @addOK="getTags"></Dialog>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/newBreadcrumb'
import { status } from '@/api/hmmm/constants' // 状态
import { list, remove, changeState } from '@/api/hmmm/tags.js' // 接口
import Dialog from './../components/tags-add' // 弹层
export default {
  name: 'subjects-tags',
  components: {
    Dialog,
    Breadcrumb
  },
  data () {
    return {
      tableKey: 0,
      tagsList: [], // 获取的数据
      total: '', // 总条数
      listLoading: true, // 加载缓存
      alertText: '', // 数据的记录
      requestParameters: { // 分页
        page: 1,
        pagesize: 10
      },
      // 要传给弹层的
      curTag: {
        subjectID: '',
        tagName: '', // 目录名称
        id: ''
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 获取列表数据
    async getTags (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // 获取数据给tagsList
      this.tagsList = res.items 
      // 获取总条数
      this.total = res.counts 
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 清除
    hClear () {
      this.$refs.requestParameters.resetFields()
      this.getTags(this.requestParameters)
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getTags(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getTags(this.requestParameters)
      }
    },
    // 进入某一页
    hCurrentChange (val) {
      this.requestParameters.page = val
      this.getTags()
    },

    // **********************************
  
    // 新增
    hAddTag () {
       // 1获取数据,传给弹层
      this.curTag.id = null
      this.curTag.tagName = ''
      this.curTag.subjectID = ''
      // 2 显示弹层
      this.$refs.refTags.dialogShow()
    },
    // 编辑
    hModify (curRow) {
      // 1获取数据,传给弹层
      console.log(curRow)
      this.curTag.id = curRow.id
      this.curTag.tagName = curRow.tagName 
      this.curTag.subjectID = curRow.subjectID
      // 2 显示弹层
      this.$refs.refTags.dialogShow()
    },
    // 删除
    hDel (id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
            .then(response => {
              this.$message.success('删除成功!')
              this.tagsList.splice(id, 1)
              this.getTags(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 启用、禁用
    hStatus (val) {
      console.log(val)
      let status = ''
      if (val.state === 1) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      this.$confirm('已成功' + status + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await changeState(data)
            .then(response => {
              this.$message.success('已成功' + status + '!')
              this.getTags(this.requestParameters)
            })
            .catch(response => {
              this.$message.error(status + '失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
          this.getTags(this.requestParameters)
        })
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    var _this = this
    this.getTags()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function () {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
